<template>
    <el-dialog class="dialog-outgroup" title="发送出团单" :visible.sync="groupVisible" :close-on-click-modal="false" :close-on-press-escape="false" width="1200px">
        <div class="wrapper-form">
            <div class="header">发送出团单</div>
            <el-form>
                <el-form-item label="出团单上传">
                    <el-upload
			        	:action="uploadUrl"
			        	:headers="uploadHeaders"
			        	:on-success="uploadPicSuccess"
			        	:show-file-list="false">
			        	<img v-if="dataForm.outGroup" :src="dataForm.outGroup" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
					      </el-upload>
                </el-form-item>
                <div class="text">上传出团单</div>
                <el-button type="primary" @click="submit">发送</el-button>
            </el-form>
        </div>
    </el-dialog>
</template>
<script>
import Cookies from 'js-cookie'
export default {
  props: ['id', 'status'],
  data () {
    return {
      groupVisible: false,
      imgUrl: '',
      uploadUrl: `${window.SITE_CONFIG.apiURL}/sys/oss/upload`,
      uploadHeaders: {
        token: Cookies.get('token') || ''
      },
      dataForm: {
        outGroupStatus: '',
        customizationOrderId: '',
        outGroup: ''
      }
    }
  },
  methods: {
    init () {
      this.groupVisible = true
      this.dataForm.customizationOrderId = this.id
      this.dataForm.outGroupStatus = this.status
    },
    uploadPicSuccess (res, file, filelist) {
      this.dataForm.outGroup = res.data.src
    },
    submit () {
      const params = this.dataForm
      this.$http
        .put('/customization/order/outGroup', { ...params })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 500,
            onClose: () => {
              this.groupVisible = false
              // 更新状态
              this.$emit('getDetail')
            }
          }).catch(() => {})
        })
    }
  }
}
</script>
<style lang="scss">
.dialog-outgroup {
  .el-dialog__body {
    padding: 30px 0 !important;
  }
  .header {
    padding-left: 20px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    font-weight: 600;
    background-color: #dbedf6;
  }
  .el-form {
    position: relative;
    margin: 20px;
    .el-form-item {
      margin-bottom: 8px;
    }
    .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      &:hover {
        border-color: #409eff;
      }
      img {
        width: 115px;
        height: 115px;
        display: block;
      }
      i {
        font-size: 28px;
        color: #8c939d;
        width: 115px;
        height: 115px;
        line-height: 115px;
        text-align: center;
      }
    }
    .text {
      position: absolute;
      top: 123px;
      padding-left: 102px;
      color: rgba(0, 0, 0, 0.65);
    }
    .el-button {
      margin-top: 55px;
      margin-left: 82px;
      width: 120px;
      text-align: center;
    }
  }
}
</style>
